<template>
	<div>
		<el-form class="container">
			<el-row :gutter="20">
			  <el-col :span="6">
				  <div class="grid-content bg-purple1">
						<h2>{{list.productName}}</h2>
						<div>产品名称</div>
					</div>
				</el-col>

				<el-col :span="6">
				  <div class="grid-content bg-purple2">
						<h2>{{list.batch}}</h2>
						<div>批号</div>
					</div>
				</el-col>

			  <el-col :span="6">
				  <div class="grid-content bg-purple3">
						<!-- <h2 v-if="list.outNumber == '' || list.outNumber == null">0</h2> -->
						<h2>{{list.source}}</h2>
						<div>入库类型</div>
					</div>
			  </el-col>

				<el-col :span="6">
				  <div class="grid-content bg-purple4">
						<h2>{{list.warehouseName}}</h2>
						<div>仓位名称</div>
					</div>
				</el-col>
			</el-row>
		</el-form>
<!--		<el-form class="container" style="margin-top:20px;" label-width="120px" label-position="right">-->
<!--			<h3>养护信息</h3>-->
<!--			<el-row style="margin-top:20px;">-->
<!--				<el-col :span="10">-->
<!--					<el-form-item label="开始时间：">-->
<!--						<el-date-picker-->
<!--							v-model="headerlist.startTime"-->
<!--							type="date"-->
<!--							value-format="yyyy-MM-dd"-->
<!--							placeholder-->
<!--							style="width:300px"-->
<!--						></el-date-picker>-->
<!--					</el-form-item>-->
<!--					<el-form-item label="养护人：">-->
<!--					    <template>-->
<!--					        <el-select-->
<!--					            v-model="headerlist.curingName"-->
<!--					            style="width:300px"-->
<!--					            placeholder="请选择"-->
<!--								value-key="id"-->
<!--					        >-->
<!--					            <el-option-->
<!--					                v-for="item in userList"-->
<!--					                :key="item.id"-->
<!--					                :label="item.name"-->
<!--					                :value="item.name"-->
<!--					            ></el-option>-->
<!--					        </el-select>-->
<!--					    </template>-->
<!--					</el-form-item>-->
<!--					<el-form-item label="养护图片：">-->
<!--					    <el-upload-->
<!--					        class="upload-poster"-->
<!--					        action="https://jsonplaceholder.typicode.com/posts/"-->
<!--					        :show-file-list="false"-->
<!--					        :on-change="imgPreview"-->
<!--					        :auto-upload="false"-->
<!--					    >-->
<!--					        <img v-if="soilImg" :src="soilImg" class="avatar" />-->
<!--					        <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!--					    </el-upload>jpg、png、gif格式，60x60像素，不超过2MB-->
<!--					</el-form-item>-->
<!--				</el-col>-->
<!--				<el-col :span="12">-->
<!--					<el-form-item label="结束时间：">-->
<!--						<el-date-picker-->
<!--							v-model="headerlist.endTime"-->
<!--							type="date"-->
<!--							value-format="yyyy-MM-dd"-->
<!--							placeholder-->
<!--							style="width:300px"-->
<!--						></el-date-picker>-->
<!--					</el-form-item>-->
<!--					<el-form-item label="养护标准：">-->
<!--					    <template>-->
<!--					        <el-select-->
<!--					            v-model="storageCuring"-->
<!--					            style="width:300px"-->
<!--					            placeholder="请选择"-->
<!--								@change="getstorageCuring"-->
<!--								value-key="id"-->
<!--					        >-->
<!--					            <el-option-->
<!--					                v-for="item in standardList"-->
<!--					                :key="item.id"-->
<!--					                :label="item.name"-->
<!--					                :value="item"-->
<!--					            >{{item.name}}</el-option>-->
<!--					        </el-select>-->
<!--					    </template>-->
<!--					</el-form-item>-->
<!--				</el-col>-->
<!--			</el-row>-->
<!--		</el-form>-->
		<el-form class="container" style="margin-top:20px;">
			<h3>养护内容</h3>
			<el-table
			    :data="headerlist.curingList"
			    style="width: 100%">
			    <el-table-column
			        prop="content"
			        label="养护检查内容"
			        >
					<!-- <el-input v-model></el-input> -->
					<template slot-scope="scope">
						<el-input v-model="scope.row.content" style="width:300px"></el-input>
					</template>
			    </el-table-column>
			    <el-table-column
			        prop="standard"
			        label="养护标准/方法"
			        >
					<template slot-scope="scope">
						<el-input v-model="scope.row.standard" style="width:300px"></el-input>
					</template>
			    </el-table-column>
			    <el-table-column
					width="120"
			        label="操作">
			        <template slot-scope="scope">
			            <el-button type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
			        </template>
			    </el-table-column>
			</el-table>
			<div class="add" @click="add">+添加一条</div>

		</el-form>
		<el-form>
			<el-form-item class="footerFixed">
			    <el-button type="primary" @click="submitrule('ruleForm')">提交</el-button>
			    <el-button @click="backPage">返回</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import { storage_findById,user_findByAll,curing_findByAll,storage_curing_save } from "@/request/api"

	export default {
		data(){
			return{
				storageCuring:'',
				soilImg:'',
				userList:[],
				id:'',
				list:{},
				headerlist:{
					curingList:[{content:'',standard:''}]
				},
				standardList:[]
			}
		},
		mounted() {
			this.id = this.$route.query.id
			this.headerlist.storageManageId = this.id
			// console.log(list)
			this.init()
		},
		methods:{
			handleDelete(index,row){
				this.headerlist.curingList.splice(index,1)
			},
			add(){
				this.headerlist.curingList.push({content:'',standard:''})
			},
			getstorageCuring(ele){
				this.headerlist.storageCuringId = ele.id
				this.headerlist.storageCuring = ele.name
			},
			imgPreview(file,fileList){
			     this.soilImg =  URL.createObjectURL(file.raw);
			     let fileName = file.name;
			    let regex = /(.jpg|.gif|.png|.jpeg)$/;
			     if (regex.test(fileName.toLowerCase())) {
			         this.headerlist.files = file.raw
			        this.headerlist.img = file.name
			    } else {
			         this.$message.error('请选择图片文件');
			     }
			},
			init(){
				curing_findByAll("").then((res)=>{
					this.standardList = res.data
				})
				storage_findById(this.id).then((res)=>{
					this.list = res.data
					console.log(this.list)


					if(this.list.inType == "1"){
						this.list.source= "加工入库"
					}else{
						this.list.source = "采购入库"
					}

				})
				user_findByAll("").then((res) => {
					this.userList = res.data;
				});
			},
			submitrule(){
				let formdata = new FormData();
				this.headerlist.curingList =  JSON.stringify(this.headerlist.curingList)
				for (var a in this.headerlist) {
				    if (this.headerlist[a] == null || this.headerlist[a] == 'null') {
				        this.headerlist[a] = '';
				        formdata.append(a, '');
				    } else {
				        formdata.append(a, this.headerlist[a]);
				    }
				}
				storage_curing_save(formdata).then((res)=>{
					this.$notify({
					    title: '提示',
					    message: '保存成功',
					    type: 'success',
					    duration: 1000
					});
					this.$router.go(-1);
				})
			},
			backPage(){
			    this.$router.go(-1)
			}
		}
	}
</script>

<style scoped>
	.add{
	    background-color: rgba(235, 245, 255, 1);
	    border: 1px dotted lightgray;
	    color: #333;
	    margin: 10px 0 0 0;
	    padding: 10px 0;
	    text-align: center;
	    cursor: pointer;
	  }
	.el-row {
	    margin-bottom: 20px;
	    &:last-child {
	      margin-bottom: 0;
	    }
	  }
	  .el-col {
	    border-radius: 4px;
	  }
	  .bg-purple-dark {
	    background: #99a9bf;
	  }
	  .bg-purple1 {
	    background: #409EFF 10000%;
	  }
	  .bg-purple2 {
	    background: #F56C6C 10000%;
	  }
	  .bg-purple3 {
	    background: #67C23A 10000%;
	  }
	  .bg-purple4 {
	    background: #909399 10000%;
	  }
	  .bg-purple-light {
	    background: #e5e9f2;
	  }
	  .grid-content {
	    border-radius: 4px;
	    min-height: 80px;
		color:white;
	  }
	  .grid-content div{
		  text-align: right;
		  font-size:14px;
		  margin-top:4px;
		  padding-right:20px;
	  }
	  .row-bg {
	    padding: 10px 0;
	    background-color: #f9fafc;
	  }
	  h2{
		  color:white;
		  text-align: right;
		  padding-top:20px;
		  padding-right:20px;
	  }
	  .avatar-uploader .el-upload {
	      border: 1px dashed #d9d9d9;
	      border-radius: 6px;
	      cursor: pointer;
	      position: relative;
	      width:180px;
	      overflow: hidden;
	    }

	    .avatar-uploader .el-upload:hover {
	      border-color: #409EFF;
	    }
	    .el-upload--text{
	        width:180px;
	    }
	    .avatar-uploader-icon {
	      font-size: 28px;
	      color: #8c939d;
	      width: 178px;
	      height: 178px;
	      line-height: 178px;
	      text-align: center;
	    }
	    .avatar {
	      width: 178px;
	      height: 178px;
	      display: block;
	    }
</style>
